<template>
  <div class="main">
    <el-carousel class="main-carousel">
      <el-carousel-item v-for="item in pic" :key="item">
        <img :src="item">
      </el-carousel-item>
    </el-carousel>
    
    <div class="main-content">
      <div class="maincontent-title">
        <span>新碟上架</span>
      </div>
      <div class="album-table">
        <el-row :gutter="16">
          <el-col :span="4" v-for="album in albumdata" :key="album.id">
            <div class="album-item">
              <a :href="'/albumInfo?id='+ album.id" target="_blank">
                <img class="album-mask" src="/imgs/album.png">
                <img class="album-img" :src="album.picture.resourcePath"/>
              </a>
              <a class="album-name" :href="'/albumInfo?id='+ album.id" target="_blank">{{album.name}}</a>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="maincontent-title">
        <span>热门mv</span>
      </div>
      <div class="mv-table">
        <el-row :gutter="50">
          <el-col :span="6" v-for="mv in mvdata" :key="mv.id">
            <div class="mv-item">
                <a :href="'/mvPlay?id='+ mv.id" target="_blank">
                    <img :src="mv.picture.resourcePath">
                    <i class="el-icon-video-play"></i>
                </a>
                <span>{{mv.name}}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
var mvs = [];
var albums = [];
module.exports = {
  data: function() {
    return {
        mvdata: [],
        albumdata: [],
        pic: [
		  '/imgs/坠落美好.jpg',
		  '/imgs/哇.png',
		  '/imgs/五月天.png',
		  '/imgs/sideeffects.png',
		]
    }
  },
  methods: {
    getAlbumData() {
      $.ajax({
        url: "/newAlbumLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          albums = data.albums;
        }
      });
      this.albumdata = albums;
      // console.log(this.albumdata)
    },
    getMvData() {
      $.ajax({
        url: "/hotMvLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          mvs = data.mvs;
        }
      });
      this.mvdata = mvs;
      // console.log(this.mvdata)
    }
  },
  mounted: function() {
    this.getAlbumData();
    this.getMvData();
  }
}
</script>
